<template>
  <div class="wid">
     <div class="demo-ruleForm">
        <el-form :model="ruleForm" :inline="true" label-width="140px" :rules="rules" ref="ruleForm" class="">
                <el-form-item label="基本信息" class="label-zi" style="width:100%;display: flex;"> </el-form-item>
                <el-form-item label="提交人" prop="uname">
                    <el-input v-model="ruleForm.uname"></el-input>
                </el-form-item>
                <el-form-item label="提交人编号：" prop="uname">
                    <el-input v-model="ruleForm.uname"></el-input>
                </el-form-item>
                <el-form-item label="申请部门：" prop="uname">
                    <el-select v-model="options" placeholder="请选择">
                    <el-option
                        v-for="item in optionsList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="物料名称：" prop="uname">
                    <el-input v-model="ruleForm.uname"></el-input>
                </el-form-item>
                <el-form-item label="物料编号：" prop="uname">
                    <el-input v-model="ruleForm.uname"></el-input>
                </el-form-item>
                <el-form-item label="采购类型：" prop="uname">
                    <el-input v-model="ruleForm.uname"></el-input>
                </el-form-item>
                <el-form-item label="物料数量：" prop="uname">
                    <el-input v-model="ruleForm.uname"></el-input>
                </el-form-item>
                <el-form-item label="物料单位：" prop="uname">
                    <el-input v-model="ruleForm.uname"></el-input>
                </el-form-item>
                <el-form-item label="订单编号" class="label-zi" style="width:100%;display: flex;"> </el-form-item>
                <el-form-item label="申请编号" prop="uname">
                    <el-input v-model="ruleForm.uname"></el-input>
                </el-form-item>
                <el-form-item label="项目需求编号" prop="uname">
                    <el-input v-model="ruleForm.uname"></el-input>
                </el-form-item>
                <el-form-item label="预计完成时间" prop="uname">
                    <el-date-picker 
                        v-model="headTiem"
                        type="daterange"
                        :clearable="false"
                        @change="changeHeadTiem()"
                        range-separator="-"
                        start-placeholder="起始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
        </el-form>
        <div class="buttonWrap">
            <el-button size="medium">取消</el-button>
            <el-button type="primary" size="medium">提交</el-button>
            <el-button type="info" size="medium">存草稿</el-button>
       </div>
     </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        ruleForm:{
            uname:'',
        },
        rules: {
            uname: [
                { required: true, message: '请输入申请人', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
        },
      optionsList: [{
          value: '技术部',
          label: '技术部'
        }, {
          value: '销售部',
          label: '销售部'
        }, {
          value: '产品部',
          label: '产品部'
        }],
        options: '',
        number:'',
        tableData: [{
            number: '1',
            content: '',
            resource: '',
            unit:"",
            times:'',
            remark:'',
            num:''
        }
       ]
      };
    },
    mounted() {},
    methods: {
        changeHeadTiem(){
            let time = this.utils.time(this.headTiem)
        },
        addFrom(){
            let obj ={
                number: '1',
                content: '',
                resource: '',
                unit:"",
                times:'',
                remark:'',
                num:''
            }
            this.tableData.push(obj)
        }
    },

  }

</script>
<style lang='scss' scoped>
.wid{
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background: #F5F5F5;
    min-height: calc(100vh - 130px);

}
.addFrom{
    width: 60px;
    height: 50px;
    border: 2px solid #e1e1e1;
    line-height: 50px;
    text-align: center;
    margin:30px auto 50px;
    color: #333;
    font-size: 25px;
    font-weight: bold;
    border-radius: 4px;
}
.buttonWrap{
    width: 390px;
    margin:  50px auto 50px;
    .el-button{
        width: 100px;
        margin:  0 15px;
    }
}
.demo-ruleForm{
 padding: 20px;
 background: #fff;
 border-radius: 10px;
}
.table{
    padding: 0 30px;
}
.fromWrap{
    padding: 0 60px;
}
.label-zi{
    ::v-deep.el-form-item__label{
        font-size: 18px;
    }
}
</style>